<!-- 注册界面 -->

<template>
  <div class="register" ref="reflayoutContainercontainer"></div>
</template>

<script>
import {
  Layout as LayoutDHX,
  Form as FormDHX,
} from 'dhx-suite-package';
import { Message, Alert } from '@/components/message';
import { mapActions } from 'vuex';

export default {
  name: 'RegisterBase',
  data: () => ({
    // 0. 整体框架
    layoutContainer: null,
    // 1. 注册表单
    layoutRegister: null,
    formRegister: null,
    vcodeInterval: null,
  }),
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions('userModule', ['register', 'sendvcode']),
    init() {
      // 0. 整体框架
      this.layoutContainer = this.layoutContainer_create(
        this.$refs.reflayoutContainercontainer,
      );

      // 1. 注册表单
      this.layoutRegister = this.layoutRegister_create();
      // 1.1. 表单
      this.formRegister = this.formRegister_create();
      this.formRegister_event();

      // 挂载各组件
      this.layoutContainer.getCell('regisContainer').attach(this.layoutRegister);
      this.layoutRegister.getCell('formRegister').attach(this.formRegister);

      return this.layoutContainer;
    },
    // ////////////////////////////
    // 0. 整体框架
    layoutContainer_create(ref) {
      const mylayout = new LayoutDHX(ref, {
        cols: [
          { id: 'regisContainer' },
        ],
      });
      return mylayout;
    },

    // 1. 注册表单
    layoutRegister_create() {
      const mylayout = new LayoutDHX(null, {
        cols: [
          {
            rows: [
              { // 放注册表单
                id: 'formRegister',
                width: 400,
                height: 'content',
              },
            ],
          },
        ],
      });
      return mylayout;
    },

    // 1.1. 表单
    formRegister_create() {
      const myform = new FormDHX('form', {
        css: 'dhx_widget--bordered',
        padding: 40,
        rows: [
          { // 邮箱
            type: 'input',
            id: 'email',
            label: '邮箱',
            validation: 'email',
            placeholder: '请输入邮箱',
            required: true,
            errorMessage: '无效的邮箱',
          },
          { // 邮件验证码
            align: 'between',
            cols: [
              {
                type: 'input',
                id: 'vcode',
                hiddenLabel: true,
                placeholder: '邮件验证码',
                required: true,
                width: '60%',
                errorMessage: '验证码不能为空',
              },
              {
                type: 'button',
                id: 'sendvcode',
                text: '发送验证码',
                color: 'secondary',
                full: true,
              },
            ],
          },
          { // 用户名
            type: 'input',
            id: 'name',
            label: '用户名',
            placeholder: '请输入用户名',
            required: true,
            errorMessage: '用户名不能为空',
          },
          { // 输入密码
            type: 'input',
            id: 'password',
            inputType: 'password',
            label: '密码',
            placeholder: '请输入密码',
            required: true,
            errorMessage: '密码不能为空',
          },
          { // 确认密码
            type: 'input',
            inputType: 'password',
            label: '确认密码',
            placeholder: '请确认密码',
            required: true,
            validation(value) { // 验证二次输入
              return value && value == myform.getItem('password').getValue();
            },
            errorMessage: '两次密码输入不一致',
          },
          { // 提交注册信息
            align: 'center',
            cols: [
              {
                type: 'button',
                id: 'send',
                text: '注册',
                submit: true,
                color: 'success',
                full: true,
              },
            ],
          },
        ],
      });
      return myform;
    },
    formRegister_event() {
      const myform = this.formRegister;
      const that = this;
      // 发送验证码
      myform.getItem('sendvcode').events.on('click', () => {
        // 判断邮箱是否合法
        if (myform.getItem('email').validate()) {
          // 获取表单内容中的邮箱
          const formState = myform.getValue();
          // 发送验证码
          const btnSendvcode = myform.getItem('sendvcode');
          this.sendvcode(formState).then(() => {
            // 发送成功，设置倒计时
            btnSendvcode.disable();
            that.vcodeInterval = 60;
            const timer = setInterval(() => {
              if (that.vcodeInterval > 0) {
                --that.vcodeInterval;
                btnSendvcode.setProperties({ text: `已发送(${String(that.vcodeInterval)})` });
              } else {
                clearInterval(timer);
                btnSendvcode.enable();
                btnSendvcode.setProperties({ text: '重新发送' });
              }
            }, 1000);
          }).catch((err) => {
            // 发送失败，提示错误信息
            Alert(err.response.data.msg);
          });
        }
      });
      // 注册
      myform.getItem('send').events.on('click', () => {
        // 判断表单是否合法
        if (myform.validate()) {
          // 获取注册表单内容
          const formState = myform.getValue();
          this.register(formState).then(() => {
            // 显示注册成功提示信息
            Message('注册成功');
            // 跳转主页
            this.$router.replace({ name: 'home' });
          }).catch((err) => {
            Alert(err.response.data.msg);
          });
        }
      });
    },
  },
};

</script>

<style>
  /* 页面 */
  .register {
    margin-top: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
